<template>

  <div class="home">
    <div ref="file"></div>
  </div>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <el-page-header  icon="el-icon-d-arrow-left" title="返回" @click="goBack"> </el-page-header>


        <el-row>
          <el-col :span="24">
            <router-link :to="{name:'CustomerInfo', params:{id: this.customerId}}">
              <el-button class="my_button" icon="el-icon-message" type="info">客户信息</el-button>
            </router-link>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <router-link :to="{name:'NotAnalyRecord', params:{id: this.customerId}}">
              <el-button
                  class="my_button" icon="el-icon-data-line" type="info">未分析记录</el-button>
            </router-link>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <router-link :to="{name:'HistoryRecord', params:{id: this.customerId}}">
              <el-button
                  class="my_button" icon="el-icon-timer" type="info">历史记录</el-button>
            </router-link>
          </el-col>
        </el-row>

      </el-aside>

      <el-main>

        <div class="content">

          <el-row>
            <el-col :span="24">

              <a href="C:\Users\DELL\Desktop\笔迹分析系统使用说明书.docx">word文档</a>

              <div class="operate_button">
                <router-link :to="{name:'DataAnalysis', params:{id: this.customerId}}">
                <el-button
                    type="primary"
                    style="margin-right: 10px"
                >
                  数据分析
                </el-button>
                </router-link>
                <el-button
                    type="primary"
                    style="margin-right: 10px"
                    @click="deleteRecordBatch"
                >
                  删除
                </el-button>
                <el-button
                    type="primary">
                  导出
                </el-button>
              </div>
            </el-col>
          </el-row>

          <el-table
              :data="historyRecords"
              style="width: 100%"
              :header-cell-style="headClass"
              :cell-style="rowClass"
              @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />

            <el-table-column label="图片" prop="pretreatedImgList">
              <template #default="scope">
                <el-image
                    v-for="pretreatedImg in scope.row.pretreatedImgList"
                    :key="pretreatedImg.id"
                    style="width: 100px; height: 100px;margin-right: 10px"
                    :src="pretreatedImg.url"
                    :preview-src-list="[pretreatedImg.url]"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="日期" prop="analyzeTime">
              <template #default="scope">
                {{calcDate(scope.row.analyzeTime)}}
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template #header>
                操作
              </template>
              <template #default="scope">
                  <el-button @click="wordDetail(scope.row.reportLink)"
                             type="text"
                             icon="el-icon-view"
                  >
                    查看分析报告
                  </el-button>
                <el-button
                    icon="el-icon-download"
                    type="text"
                    @click="download(scope.row.reportLink)">
                  下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>



        </div>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import customer from "@/api/customer/customer";


export default {
  name: "HistoryRecord",
  data() {
    return {
      customerId: null,
      status: 0,
      fit: 'fill',
      search: '',
      historyRecords: null,
      // 选中记录信息
      multipleSelection: [],
      // 选中记录编号
      recordIdSelected: [],
    }
  },
  created() {
    // 如果路由中有参数值则执行此方法
    if(this.$route.params && this.$route.params.id) {
      // 从路由中获取id值
      this.customerId = this.$route.params.id
    }
    console.log("调用了方法")
    this.getHistory();

  },
  watch: {  // 监听(解决路由切换问题)
    // 路由变化方式，路由发生变化即执行
    $route(to, from){
    }
  },
  methods: {
    //将docx文档渲染到前端
    wordDetail(url) {
      // 微软提供的方法
      window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url)
    },
    // 表头居中显示
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    goBack() {
      this.$router.replace('/customer/list')
    },
    getHistory() {
        customer.getHistory(this.customerId, this.status)
          .then((response) => {
            this.historyRecords = response.data.item.reportHistoryList;
          }).catch(error => {
            console.log(error);
            this.$message( {
              type: 'error'
            })
        })
    },
    deleteRecordBatch() {
      this.$confirm('此操作将删除记录,是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let array = [];
        for (let i = 0; i < this.recordIdSelected.length; i++) {
          let id = {};
          id.id = this.recordIdSelected[i];
          array[i] = id;
        }
        array = {array};
        customer.deleteRecordBatch(array).then(response => {
          this.getHistory()
          this.$message({
            type: 'success',
            message: '删除成功',
          })
          return response;
        }).catch((response) => {
          console.log("error:" + response)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
    download(val){
      window.open(val, '_blank')
    },
    // 计算日期
    calcDate(timeStr){
      timeStr =timeStr.substring(0,16);
      return timeStr;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val

      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.recordIdSelected[i] = this.multipleSelection[i].reportId
      }
    },
  }
}
</script>

<style scoped>
.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  width: 250px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.handle-box {
  margin: 20px 50px;
  /*border-style: dashed;*/
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 120px;
  display: inline-block;
  margin: 10px 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mr10 {
  margin-right: 10px;
}
.my_table{
  margin: 0px 30px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.container {
  margin: 20px 400px;
}
.el-input {
  width: 180px;
}
#input-textarea {
  width: 300px;
}

#reset-btn {
  margin-right: 25px;
}
.important {
  color: red;
}

.content {
  border-style: outset;
}
.information {
  border-style: outset;
}
.description {
  border-style: outset;
}
.title {
  font-size: 30px;
  margin: 5px 500px;
}
.my_button{
  margin: 5px 30px;
  width: 180px;
  font-size: 16px
}
.operate_button {
  margin-left: 850px;
}
.first_title {
  font-size: 24px;
  color: blue;
  font-weight: bold;
  font-style: italic;
  margin-right: 1000px;
}
.second-title {
  font-size: 20px;
  color: red;
  text-align:center;
}

.export {
  text-align: center;
}

.footer-button {
  margin: 5px 600px;
}
</style>